import React, { useState } from "react";
import styles from "./index.module.scss";
import { Image, List, Toast } from "antd-mobile";
import {
  FileOutline,
  InformationCircleOutline,
  SoundOutline,
} from "antd-mobile-icons";
import { useAppDispatch } from "@/hooks";
import { addToken } from "@/store/userSlice";
import { useNavigate } from "react-router-dom";
type Props = {};
//用户列表信息
interface IUserData {
  src: string;
  num: number;
  text: string;
}

export default function index({}: Props) {
  const [userArr, setUserArr] = useState([
    {
      src: "./images/user/collect_3.png",
      num: 3,
      text: "收藏",
    },
    {
      src: "./images/user/note_1.png",
      num: 1,
      text: "笔记",
    },
    {
      src: "./images/user/examination_me.png",
      num: 3,
      text: "我的考试",
    },
    {
      src: "./images/user/data_me.png",
      num: 3,
      text: "学习资料",
    },
  ]);
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  //退出
  const signout = () => {
    //清空本地token
    localStorage.clear();
    //清空仓库token
    dispatch(addToken(""));
    //提示
    Toast.show({
      icon: "success",
      content: "退出成功",
      duration: 2000,
    });
    //定时器跳转登录页面
    setTimeout(() => {
      navigate("/login");
    }, 2000);
  };
  return (
    <div className={styles.qd_user_page}>
      {/* 用户信息，个人中心，列表 */}
      <div className="qd_user_area">
        {/* 背景图 */}
        <div className="qd_user_back"></div>
        {/* 个人中心 */}
        <div className="qd_user_personal">个人中心</div>
        {/* 退出 */}
        <div className="qd_user_signout" onClick={signout}>
          退出
        </div>
        {/* 用户信息 */}
        <div className="qd_user_img_area">
          <div className="qd_user_img">
            <Image src="./images/user/avatar.png" fit="fill" />
          </div>
          <div className="qd_user_name">小棋</div>
        </div>
        {/* 列表选项 */}
        <div className="qd_user_list_area">
          {userArr.map((item: IUserData, index) => {
            return (
              <div className="qd_user_list" key={index}>
                <div className="qd_user_list_img">
                  <Image src={item.src} fit="fill" />
                </div>
                <div className="qd_user_list_num">{item.num}</div>
                <div className="qd_user_list_text">{item.text}</div>
              </div>
            );
          })}
        </div>
      </div>
      {/* 用户列表 */}
      <List className="qd-user-function-list">
        <List.Item
          prefix={
            <Image className="qd-user-icon" src="./images/user/MyProfile.png" />
          }
          onClick={() => {}}
        >
          我的资料
        </List.Item>
        <List.Item
          prefix={
            <Image className="qd-user-icon" src="./images/user/Notice.png" />
          }
          onClick={() => {}}
        >
          系统公告
        </List.Item>
        <List.Item
          prefix={
            <Image className="qd-user-icon" src="./images/user/Aboutus.png" />
          }
          onClick={() => {}}
        >
          关于我们
        </List.Item>
      </List>
    </div>
  );
}
